
<template>
  <SearchTableTpl
    :search-model="search.model"
    :search-config="search.config"
    :table-config="table.config"
    :table-data="table.data"
    :current-page="table.currentPage"
    :page-sizes="table.pageSizes"
    :page-size="table.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="table.total"
    @search="onSearch"
    @reset="onReset"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
    <!-- 自定义 -->
    <div
      slot="btns"
      slot-scope="{row}"
    >
      <el-button
        type="primary"
        @click="handlerTest(row)"
      >
        详情
      </el-button>
    </div>
  </SearchTableTpl>
</template>

<script>
export default {
  name: 'Dash',
  data() {
    return {
      search: {
        config: [
          {
            label: '用户名',
            prop: 'userName',
            placeholder: '请输入用户名',
            type: 'input',
          },
          {
            label: '用户角色',
            prop: 'userRole',
            placeholder: '请选择用户角色',
            type: 'select',
            options: [{
              label: '管理员',
              value: 'admin'
            }]
          }
        ],
        model: {
          userName: '1',
        },
      },
      table: {
        config: [
          {
            label: '角色',
            prop: 'roleName',
            slot: ''
          },
          {
            label: '操作',
            prop: '',
            slot: 'btns'
          }
        ],
        data: [
          {
            roleName: '管理员'
          }
        ],
        // 分页配置
        currentPage: 1,
        pageSizes: [10, 20, 30, 40],
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    onSearch() { },
    onReset() { },
    handleSizeChange() { },
    handleCurrentChange() { },

    // 列表操作方法
    handlerTest(row){
      console.log(row)
    }
  }
}
</script>